<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工列表练习</title>
</head>
<body>
    <input type="text" placeholder="员工姓名" id="i1">
    <input type="text" placeholder="员工工资" id="i2">
    <input type="text" placeholder="员工工作" id="i3">
    <input type="button" value="添加" onclick="f()">
    <table border="1">
        <caption>员工列表</caption>
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>工作</th>
        </tr>
    </table>
    <script>
        // 获取到页面中的元素对象
        let i1 = document.querySelector("#i1")
        let i2 = document.querySelector("#i2")
        let i3 = document.querySelector("#i3")
        let table = document.querySelector("table")
        function f(){
        // 创建元素标签
        let tr =document.createElement("tr")
        let nameTd =document.createElement("td")
        let salaryTd =document.createElement("td")
        let jobTd =document.createElement("td")
        // 将文本框的内容渎职给td
        nameTd.innerText = i1.value;
        salaryTd.innerText = i2.value;
        jobTd.innerText = i3.value;
        // 将数据床入到tr
        tr.append(nameTd,salaryTd,jobTd);
        // 将tr装入到table
        table.append(tr)
        // 将table传入到页面
        document.body.append(table)
        }
    </script>
</body>
</html>